<template>
  <div>
    <a-input placeholder="请选择清空字段" :readonly="true" :value="fieldNames" @click="openModal"/>
    <ClearFieldInputModal @ok="handleOK"
      ref="ClearFieldInputModal" :form-definition="formDefinition"/>
  </div>
</template>
<script>
import { createModelForVue, createProps } from '@/utils'
import { createFormDefinition, getFormDefinitionVariables } from '@comp/hhd/design/FormDesigner/types'
import ClearFieldInputModal
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/ClearFieldInputModal.vue'
import handle from 'ant-design-vue/lib/vc-slider/src/Handle'

export default {
  name: 'ClearFieldInput',
  components: { ClearFieldInputModal },
  model: createModelForVue(),
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    value: createProps(String)
  },
  methods: {
    handleOK(values) {
      if(!values || !values.length) {
        this.change(undefined)
        return
      }
      this.change(values.toString())
    },
    change(v) {
      this.$emit('change', v)
    },
    openModal() {
      this.$refs.ClearFieldInputModal.setData(this.value);
    }
  },
  computed: {
    handle() {
      return handle
    },
    fieldNames() {
      let variables = getFormDefinitionVariables(this.formDefinition) || []
      let values = (this.value + '').split(','), res = []
      for (let i = 0; i < values.length; i++) {
        let variable = variables.find(v => v.fieldId === values[i])
        variable && (res.push(variable.title))
      }
      if (res.length) {
        return res.toString()
      }
      return undefined
    }
  }
}
</script>